<template>
  <div class="app-container">
    <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">{{ scope.$index+1 }}</template>
      </el-table-column>
      <el-table-column label="微博昵称" width="220">
        <template slot-scope="scope">
          <el-link target="_blank" :href="scope.row.profile_url">{{ scope.row.screen_name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="微博头像" width="80">
        <template slot-scope="scope">
          <el-image :src="scope.row.profile_image_url" />
        </template>
      </el-table-column>
      <el-table-column label="微博ID" width="150" prop="wb_uid" />
      <el-table-column label="自动评论内容" width="250" prop="content" />
      <el-table-column align="center" prop="created_at" label="插入时间/更新" width="220">
        <template slot-scope="scope">
          <i class="el-icon-time" /><span>{{ scope.row.created_at| timeFilter }}</span><br>
          <i class="el-icon-time" /><span>{{ scope.row.updated_at| timeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作(谨慎删除)">
        <template slot-scope="scope">
          <el-button
            type="success"
            icon="el-icon-s-tools"
            circle
            @click.native.prevent="updateRow(scope.row)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click.native.prevent="deleteUserName(scope.row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="自动评论👇这些人的微博"
      :visible.sync="dialogFormVisible"
      width="60%"
      center
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="微博昵称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" style="width:200px" />
          <el-button type="primary" plain @click="selectName">🔍 </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-if="tableData.length>0"
        :data="tableData"
        height="300"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="user.screen_name"
          label="昵称"
          width="180"
        />
        <el-table-column
          label="头像"
          width="80"
        >
          <template slot-scope="scope">
            <el-image :src="scope.row.user.profile_image_url" style="width: 50px;height: 50px" />
          </template>
        </el-table-column>
        <el-table-column
          prop="user.followers_count"
          label="粉丝"
        />
        <el-table-column
          prop="user.follow_count"
          label="关注"
        />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureChange">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="自动评论内容" :visible.sync="dialogRowFormVisible">
      <el-form :model="rowForm">
        <el-form-item label="评论内容" :label-width="formLabelWidth">
          <el-input v-model="rowForm.content" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRowFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { wbNameList, destroy, selectName, wbNameCreate, updateById } from '@/api/weibo'
import { parseTime } from '@/utils'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    timeFilter(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      dialogRowFormVisible: false,
      tableData: [],
      multipleSelection: [], // 多选
      form: {
        name: ''
      },
      rowForm: {},
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      const { data } = await wbNameList()
      this.list = data.items
      this.listLoading = false
    },
    async deleteUserName(id) {
      const res = await destroy(id)
      if (res.code === 0) {
        this.$message({
          message: 'Delete success',
          type: 'success'
        })

        this.fetchData()
      }
    },
    async selectName() {
      const res = await selectName(this.form)
      if (res.code === 0) {
        if (res.data.cards.length > 0 && res.data.cards[1].card_group) {
          this.tableData = res.data.cards[1].card_group
        } else {
          this.$message({
            message: '这里还没有内容',
            type: 'error'
          })
        }
      }
    },
    async handleSelectionChange(val) {
      this.multipleSelection = val
    },
    async sureChange() {
      this.dialogFormVisible = false
      const createData = await wbNameCreate(this.multipleSelection)
      if (createData.code === 0) {
        this.fetchData()
      } else {
        this.$message({
          message: '操作失败',
          type: 'error'
        })
      }
    },
    async updateRow(row) {
      this.dialogRowFormVisible = true
      this.rowForm = row
    },
    async sureUpdate() {
      this.dialogRowFormVisible = false
      const updateRes = await updateById(this.rowForm)
      if (updateRes.code === 0) {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '操作失败',
          type: 'error'
        })
      }
    }
  }
}
</script>
